<!--
 * @Description: Description
 * @Author: zhaojiansen
 * @Date: 2022-11-01 14:12:37
 * @LastEditors: zhaojiansen
 * @LastEditTime: 2022-12-01 15:17:06
-->
<template>
  <div class="messagedetails">
    <div class="messagedetailsHeight" style="display: flex">
      <div class="text">员工欢迎语详情</div>
      <div class="button">
        <el-button type="info" plain @click="returnclick">返回</el-button>
      </div>
    </div>
    <div class="messagedetailsConcent">
      <el-form label-width="100px">
        <el-form-item label="欢迎语名称">
          <div>{{ particulars.welcomeName }}</div>
        </el-form-item>
        <el-form-item label="群发员工">
          <el-tag v-for="item in particulars.userNames" :key="item">{{ item }}</el-tag>
        </el-form-item>
        <el-form-item label="生效时间">
          <div>{{ particulars.endValidTime }}</div>
        </el-form-item>
        <el-form-item label="文本内容">
          <div>{{ particulars.welcomeMsg }}</div>
        </el-form-item>
        <el-form-item label="素材">
          <NormalSelectMaterial v-if="operateFlag" :selectedList="particulars.mediaContentDetails" :disabled="true" />
        </el-form-item>
        <el-form-item label="二维码">
          <div v-if="+particulars.codeState === 0">
            {{` ${['员工活码', '渠道活码', '群活码'][particulars.qrType]} : ${particulars.activityName}` }}
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { detailsInterface } from '@/api/createGreeting/messagedetails.js'

export default {
  data() {
    return {
      particulars: {},
      material: [],
      operateFlag: '',
    }
  },
  methods: {
    detailsInterface() {
      this.loading = true
      const data = {
        id: this.$route.query.id,
        mediaId: this.$route.query.mediaId
      }
      detailsInterface(data).then((res) => {
        this.particulars = res.data
        this.material = res.material
        this.particulars.endValidTime = res.data.startValidTime + ' ' + '-' + ' ' + res.data.endValidTime
        this.particulars.userNames = res.data.userNames.split(',')
        this.loading = false
        this.operateFlag = 'DETAIL'
      })
    },
    returnclick() {
      this.$router.push({
        path: 'createGreeting'
      })
    },
  },
  mounted() {
    this.detailsInterface()
  }
}
</script>

<style lang="scss" scoped>
.messagedetails {
  .messagedetailsHeight {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .text {
      font-size: 20px;
    }
  }

  background-color: white;
  padding: 20px;
}

.material {
  width: 35%;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #f2f2f2;
  justify-content: space-between;
}

.material-left {
  margin-right: 30px;
}
</style>
